<template>
  <div id="img" style="height: 100%">
    <el-container style="height: 100%">
      <el-aside
        width="200px"
        style="height: 100%;
"
      >
        <el-menu :default-openeds="['1', '5']" style="height: 100%; background-color: transparent !important;/* 背景透明 */">
          <router-link to="/AdHome/AdminInfo">
            <el-menu-item index="1">
              <template slot="title"
                ><i class="el-icon-user"></i>个人信息</template
              >
            </el-menu-item></router-link
          >

          <el-submenu index="2">
            <template slot="title"
              ><i class="el-icon-user-solid"></i>员工信息</template
            >
            <el-menu-item-group>
              <router-link to="/AdHome/EmployeeInfo"
                ><el-menu-item index="2-1"
                  >员工个人信息</el-menu-item
                ></router-link
              >
              <router-link to="/AdHome/ClockHistory"
                ><el-menu-item index="2-2"
                  >员工打卡信息</el-menu-item
                ></router-link
              >
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="3">
            <template slot="title"
              ><i class="el-icon-message"></i>请假信息</template
            >
            <el-menu-item-group>
              <router-link to="/AdHome/AskLeave"
                ><el-menu-item index="3-1">请假审批</el-menu-item></router-link
              >
              <router-link to="/AdHome/AskLeaveHistory"
                ><el-menu-item index="3-2"
                  >历史请假信息查询</el-menu-item
                ></router-link
              >
            </el-menu-item-group>
          </el-submenu>
          <router-link to="/AdHome/Acceptability">
            <el-menu-item index="4">
              <template slot="title"
                ><i class="el-icon-menu"></i>考勤合格率查看</template
              >
            </el-menu-item></router-link
          >
          <router-link to="/AdHome/SetClockInfo"
            ><el-menu-item index="5">
              <template slot="title"
                ><i class="el-icon-setting"></i>功能权限设置</template
              >
            </el-menu-item></router-link
          >


          <router-link to="/AdHome/ChangePassword">
            <el-menu-item index="6">
              <template slot="title"
                ><i class="el-icon-edit"></i>修改密码</template
              >
            </el-menu-item>
          </router-link>
<!-- 
          <router-link to="/AdHome/SetClockInfo"
            ><el-menu-item index="6">
              <template slot="title"
                ><i class="el-icon-setting"></i>公告栏设置</template
              >
            </el-menu-item></router-link
          > -->
        </el-menu>
      </el-aside>

      <el-container>
        <el-header id="homeHeader" style=" font-size: 12px;line-height: 60px;display: flex;">
          <div style="flex: 1;font-size: 18px;">
            <span>人脸识别打卡系统管理员后台</span>
          </div>
          <el-dropdown>
            <span style="width: 50px;">管理员{{ this.$store.state.ID }}</span><i class="el-icon-arrow-down" style="margin-left: 5px;"></i>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item @click.native="loginOut">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-header>
        <router-view></router-view>
      </el-container>
    </el-container>
  </div>
</template>
<script>
import qs from "qs";
export default {
  data() {
    return {
      tableData: [],
      total: 0,
      pageNum: 1,
      pageSize: 5,
      department: "",
      job: "",
      name: "",
      id: "",
      dialogFormVisible: false,
      adminFrom: {},
    };
  },
  methods: {
    load() {
      this.request
        .get("/page", {
          params: {
            pageNum: this.pageNum,
            pageSize: this.pageSize,
            name: this.name,
            id: this.id,
          },
        })
        .then((req) => {
          this.tableData = req.records;
          this.total = req.total;
        });
    },
    reset() {
      (this.id = ""), (this.name = ""), this.load();
    },
    handleSizeChange(pageSize) {
      this.pageSize = pageSize;
      this.load();
    },
    handleCurrentChange(pageNum) {
      this.pageNum = pageNum;
      this.load();
    },
    changAdminInfo(row) {
      this.adminFrom = row;
      this.dialogFormVisible = true;
    },
    deleteAdminInfo(id) {
      this.request.delete("/delete/" + id).then((res) => {
        if (res) {
          this.$message.success("删除成功");
          this.dialogFormVisible = false;
          this.reset();
        } else {
          this.$message.error("删除失败");
        }
      });
    },
    addAdminInfo() {
      console.log(this.adminFrom);
      this.$axios
        .post("/saveAdmin", qs.stringify(this.adminFrom))
        .then((res) => {
          if (res) {
            this.$message.success("添加成功");
            this.dialogFormVisible = false;
            this.reset();
          } else {
            this.$message.error("添加失败");
          }
        });
    },
    openToSave() {
      (this.dialogFormVisible = true), (this.adminFrom = []);
    },
    pushToclock() {
      this.$router.push({
        path: "/Clock",
      });
    },
    loginOut(){
      this.$router.push({
        path: "/Login",
      });
    },
    init(){
      this.$router.push({
        path: "/AdHome/FirstPage",
      });
    }
  },
  created() {
    this.load();
    this.init();
  },
};
</script>
<style>

.el-aside {
  color: #333;
}

.el-header {
  background-color: #b3c0d1;
  color: #333;
  line-height: 60px;
}

#img{
  background-image: url(@/img/admin.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}

#img2{
  background-image: url(@/img/admin1.jpg)
}
</style>
